<script setup lang="ts">
 import { ref,inject } from 'vue'
 import {
   checkCode,
   checkPersonalRegistry,
   checkRegistry,
   getEventsItemTree,
   getEventsPublicSameScreenOne,
   getEventsPublicScreen,
   getIsMechanism,
   previousEventsList,
   trainInfo,
   trainSubmit
 } from '@/api/training'
 import { onLoad, onShow, } from '@dcloudio/uni-app'
 import mpHtml from '@/components/mp-html/mp-html.vue'
 import { checkLogin, msg, picturePreview, showModal } from '@/utils/tools'
 import zSwiper from '@zebra-ui/swiper/components/z-swiper/z-swiper.vue'
 import zSwiperItem from '@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue'
import { getCertificationInfo } from '@/api/user'
import {useStore} from "vuex"

const store = useStore();
 const $Prefix = inject('$Prefix')
 const tabIndex = ref(0)
 const trainId = ref(0)
 const campId = ref(0)
 const institutionType = ref(0)// 0 为机构  1：为学校
 const detailsInfo = ref({})
 const currentNum = ref<Number>(0)
 const validateCodeShow = ref(false)
 const markersAddress = ref<any[]>([])
 // const { top } = uni.getMenuButtonBoundingClientRect()
 const bottomPadding = (uni.getSystemInfoSync().screenHeight as number) - (uni.getSystemInfoSync().safeArea.bottom as number)
 const tipShow = ref(false)
 const isMechanism = ref(false)
 const sportsScreeningShow = ref(false)
 const exerciseProjectTeam = ref([])
 const exerciseProjectTeamScreen = ref([])
 const sportsItem = ref([])
 const minAge = ref(0)
 const maxAge = ref(0)
 const itemNameSelect = ref('')
 const eventsNumberNameSelect = ref('')
 const plannedStartTime = ref('')
 const plannedCompletionTime = ref('')
 const registrationAmount = ref(0)
 const firse = ref(true)

 const zswiper = ref()
 const zswiperthumbs = ref()

 // 学员风采
 const flowList = ref([])
 const flowPreView = ref([])

 const liveOptions = {
   spaceBetween: 10,
   thumbs: {
     swiper: true
   }
 }
 const optionsThumbs = {
   spaceBetween: 10,
   slidesPerView: 4,
   freeMode: true,
   watchSlidesProgress: true,
   thumbs: {
     use: true
   }
 }
 const setThumbsSwiper = () => {
   zswiper.value.swiper.on("beforeMount", () => {
     zswiper.value.swiper.params.thumbs.swiper = zswiperthumbs.value.swiper;
   })
 }

 // onLoad((options:any) => {
 //   // #ifdef MP-WEIXIN
 //   uni.showShareMenu({
 //     withShareTicket: true,
 //     menus:["shareAppMessage","shareTimeline"]
 //   })
 //   // #endif
 //   if(options.scene){
 //     const sceneList = decodeURIComponent(options.scene).split('&')
 //     let params:any = {}
 //     for (let i= 0; i < sceneList.length; i++){
 //       let item = sceneList[i].split('=')
 //       params[item[0]] = item[1]
 //     }
 //     trainId.value = params.id
 //     campId.value = params.campId
 //   }else{
 //     trainId.value = options.id
 //     campId.value = options.campId
 //   }
 //   // 判断是否机构报名
 //   getIsMechanism().then(res => {
 //     if(res.code === 200){
 //        isMechanism.value = res.data
 //     }
 //   })
 // })
 const addressFilter = () => {
   return exerciseProjectTeamScreen.value.find((item:any) => {
     return item.checked
   })
 }

 onShow(() => {
   // getTrainInfo()
 })
 const getTrainInfo = () => {
   trainInfo({id:trainId.value}).then(res => {
      if(res.code == 200){
        detailsInfo.value = res.data
        if(detailsInfo.value.contacts){
          detailsInfo.value.contacts = JSON.parse(detailsInfo.value.contacts)
        }else{
          detailsInfo.value.contacts = []
        }
        detailsInfo.value.team.map((item:any) => {
          item.collapse = false
          return item
        })
        if(detailsInfo.value.latitude && detailsInfo.value.longitude){
          markersAddress.value = [
            {
              id:0,
              iconPath:`${$Prefix}/public/images/smallImage/marker.png`,
              width:20,
              height:20,
              longitude:parseFloat(detailsInfo.value.longitude),
              latitude:parseFloat(detailsInfo.value.latitude),
              callout:{
                padding:'5px 15px',
                borderRadius:6,
                anchorY: 0,
                anchorX: 0,
                fontSize:14,
                display: 'ALWAYS',
                content:detailsInfo.value.address
              }
            }
          ]
        }else{
          markersAddress.value = []
        }
      }
   })
   previousEventsList({id:trainId.value}).then(res => {
     let previousList = []
     flowPreView.value = []
     previousList = JSON.parse(JSON.stringify(res.data)).map((item:any,index:number) => {
       item.fileAddress = JSON.parse(item.fileAddress)
       return item.fileAddress[0]
     })
     flowList.value = flowList.value.concat(previousList)
     flowPreView.value = flowList.value.map((item:any) => {
       return item.fullUrl
     })
   })
 }
 const bannerChange = (e:{current:number}) => {
   currentNum.value = e.current
 }

 const navigatorClick = (url:string) => {
   uni.navigateTo({url})
 }
 const personalSign = () => {
   // if(detailsInfo.value.status == 0){
   //   msg('该报名未开始')
   //   return false
   // }
   // if(detailsInfo.value.status == 2){
   //   msg('该报名已结束，敬请等待下一期开始')
   //   return false
   // }
   skipOrder()
 }
 // 勾选完成后跳转地址
  const skipOrder = () => {
      checkLogin().then(res => {
		  getCertificationInfo({openid: store.state.user.openId}).then(res=>{
		  	if(res.code==200&&res.data) {
		  		navigatorClick(`/pageSignUp/personalSignUp/signUp`)
		  	} else {
		  		uni.showModal({
		  		  content:'您还未实名认证，请实名认证后再进行操作！',
		  		  confirmText:'前往认证',
		  		  confirmColor:'#92C75B',
		  		  cancelText:'再看看',
		  		  cancelColor:'#929292'
		  		}).then(res => {
					if(res.confirm) {
						uni.navigateTo({url:'/pages/certification/certification'})
					}
		  		  
		  		})
		  	}
		  })
		  
      })
  }
 // 微信导航
 const navigationClick = (data:any) => {
   uni.openLocation({
     latitude: parseFloat(data.latitude),
     longitude: parseFloat(data.longitude),
     name:data.name,
     address:data.address
   });
 }

 const validDateOpen = () => {
   validateCodeShow.value = true
 }
 const validDateClose = () => {
   validateCodeShow.value = false
 }
 // 邀请码判断
 const emailCodeFun = (val:string) => {
   checkCode({institutionInvitationStr:val,campId:campId.value,type:institutionType.value}).then(res => {
      if(res.code == 200){
        if(institutionType.value == 1){
          if(res.data.isRegisty){
            navigatorClick(`/pages/mechanismInfo/mechanismInfo`)
          }else{
            navigatorClick(`/pages/teamSignUp/teamSignUp?institutionInvitationStr=${val}`)
          }
        }else{
          navigatorClick(`/pages/schoolIntroduce/schoolIntroduce?codeText=${val}`)
        }
      }
   }).catch(err => {
     msg(err)
   })
 }
 const showTip = (type:any) => {
   tipShow.value = true
   institutionType.value = type
 }
 const tipColse = () => {
   tipShow.value = false
   teamClick(institutionType.value)
 }
 // 团队报名
 const teamClick = (type:any) => {
   // 验证是否登录
   checkLogin().then(res => {
     // institutionType.value = type
     if(type == 1){
       checkRegistry().then(res => {
         if(!res.data){
           navigatorClick(`/pages/teamSignUp/teamSignUp`)
         }else {
           navigatorClick(`/pages/mechanismInfo/mechanismInfo`)
         }
       })
     }else{
       validateCodeShow.value = true
     }
   })
 }
 const closeCode = () => {
   validateCodeShow.value = false
 }

 const telPhone = (tel:string) => {
   uni.makePhoneCall({
     phoneNumber:tel
   })
 }
 // 运动筛选 关闭
 const sportsScreeningClose = ()=>{
   if(trainId.value != eventsIdNumber.value){
     trainId.value = eventsIdNumber.value
     getTrainInfo()
   }
   exerciseProjectTeam.value = []
   exerciseProjectTeamScreen.value = []
   firse.value = true
   sportsScreeningShow.value = false

 }
 const eventsIdNumber = ref('')
 const eventsNumberId = ref('')
 // 运动筛选 打开
 const sportsScreeningOpen = (trainId:any) =>{
   sportsItem.value = []
   exerciseProjectTeam.value = []
   exerciseProjectTeamScreen.value = []
   getEventsPublicSameScreenOne({eventsIds:trainId}).then(res=>{
     exerciseProjectTeam.value = res.data
     const checkIndex = exerciseProjectTeam.value.findIndex(item => item.id == trainId)
     if(firse.value && checkIndex > -1){
       exerciseProjectTeam.value[checkIndex].checked = true
       eventsIdNumber.value = exerciseProjectTeam.value[checkIndex].id
       itemNameSelect.value = exerciseProjectTeam.value[checkIndex].itemName
       minAge.value = exerciseProjectTeam.value[checkIndex].minAge
       maxAge.value = exerciseProjectTeam.value[checkIndex].maxAge
       registrationAmount.value = exerciseProjectTeam.value[checkIndex].registrationAmount
       getEventsItemTree({eventsId:exerciseProjectTeam.value[checkIndex].id}).then(res=>{
         sportsItem.value = res.data
       })
       getEventsPublicScreen({eventsId:exerciseProjectTeam.value[checkIndex].id}).then(res=>{
         exerciseProjectTeamScreen.value = res.data
         exerciseProjectTeamScreen.value[0].checked = true
         eventsNumberId.value = exerciseProjectTeamScreen.value[0].id
         eventsNumberNameSelect.value =  exerciseProjectTeamScreen.value[0].name
         plannedStartTime.value = exerciseProjectTeamScreen.value[0].plannedStartTime
         plannedCompletionTime.value = exerciseProjectTeamScreen.value[0].plannedCompletionTime
       })
       firse.value = false
     }

     sportsScreeningShow.value = true
   })
 }
 const radioClick = (data:any) => {
   sportsItem.value = []
   exerciseProjectTeamScreen.value = []
   exerciseProjectTeam.value.forEach((item:any, index:any) => {
     item.checked = item.id === data.id;
   });
   eventsIdNumber.value = data.id
   itemNameSelect.value = data.itemName
   registrationAmount.value = data.registrationAmount
   minAge.value = data.minAge
   maxAge.value = data.maxAge
   getEventsPublicScreen({eventsId:data.id}).then(res=>{
     exerciseProjectTeamScreen.value = res.data
     exerciseProjectTeamScreen.value[0].checked = true
     plannedStartTime.value = exerciseProjectTeamScreen.value[0].plannedStartTime
     plannedCompletionTime.value = exerciseProjectTeamScreen.value[0].plannedCompletionTime
   })
   getEventsItemTree({eventsId:data.id}).then(res=>{
     sportsItem.value = res.data
   })
 };
 const radioClick2 = (data:any) => {
   exerciseProjectTeamScreen.value.forEach((item:any, index:any) => {
     item.checked = item.id === data.id;
   });
   eventsNumberId.value =  data.id
   eventsNumberNameSelect.value = data.name
   plannedStartTime.value = data.plannedStartTime
   plannedCompletionTime.value = data.plannedCompletionTime
 };

  const eventsItemIds = ref([])
 const radioClick3 = (list:any,data:any) => {
   list.forEach((item:any, index:any) => {
     item.checked = item.id === data.id;
   });
   eventsItemIds.value = sportsItem.value.flatMap(v => v.children).filter(s=>s.checked).map(i=>i.id)
 };
 const signUpNow = () =>{
   if( sportsItem.value.length > 0 && eventsItemIds.value.length <=0 ){
     return msg('请选择至少一样运动项')
   }
   const params = {
     eventsId:eventsIdNumber.value,
     eventsItemIds:eventsItemIds.value,
     eventsNumberId:eventsNumberId.value,
     campId:campId.value,
     projectName:detailsInfo.value.name +'--'+ (itemNameSelect.value ? itemNameSelect.value:'' ),
     eventsNumberNameSelect:eventsNumberNameSelect.value
   }
   navigatorClick(`/pageSignUp/personalSignUp/personalSignUp?params=${encodeURIComponent(JSON.stringify(params))}`)
 }
</script>

<template>
    <xx-title title="赛事详情"/>
	<!-- <view class="bg"></view> -->
	<image style="width: 100%;height: 3200rpx;"  :src="`https://pro.star.ihehang.com/mini/static/icons/ui-181.jpg?time=${new Date().getTime()}`"/>
    <view class="bottom-btn" :style="{paddingBottom:`14rpx`}">
      <view class="personal-registration" :style="{width:isMechanism?'67%':''}" @click="personalSign" >立即报名</view>
    </view>
</template>

<style scoped lang="scss">
	.bg{
		width: 100%;
		height:100vh;
		background-image: url('https://pro.star.ihehang.com/mini/static/icons/ui-100.jpg');
		background-size: contain;
		background-position: center;
	}
  .exerciseProjectTeam{
    border-bottom: 1px solid rgba(226, 226, 226, 0.78);
    padding: 20rpx;
  }
  .exerciseProjectTeam:last-child{
    border: none;
  }
  .train-info-tops{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
  .boxPop{
    padding: 0 20rpx 100rpx 20rpx;
    max-height: 35rem;
    height: 30rem;
    overflow-y: auto;
  }
  .tips{
    font-size: 26rpx;
    margin: 20rpx 0;
    background-color: #FFF3EA;
    padding: 10rpx 15rpx;
    display: flex;
    color: #FFA25B;
    border-radius: 20rpx;
    align-items: baseline;
    line-height: 1.5;
    text{
      margin-left: 10rpx;
      vertical-align: text-top;
    }
  }
  .flex{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    margin: 10rpx 0;
    .address-left{
      width: calc(100% - 28rpx);
      display: flex;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .address{
        color: #505363;
        margin-left: 5rpx;
        font-size: 28rpx;
      }
    }
  }
  .pritemListName{
    font-size: 14px;
    color: #4d4d4d;
  }
  .u-page__tag-item{
    margin-right: 10rpx;
    margin-bottom: 10rpx;
  }
  .train-details{
    background: #f5f5f5;
  }
  .banner{
    position: relative;
    height: 512rpx;
    ::v-deep .u-swiper__indicator{
      right: 10px;
      bottom: 25px;
    }
    ::v-deep .u-swiper__wrapper__item__wrapper{
      height: 100%;
    }
    .indicator{
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(10px);
      border-radius: 29px;
      padding: 6rpx 14rpx;
      font-size: 24rpx;
      color: #FFFFFF;
      font-weight: 500;
      line-height: normal;
    }
    .back-icon{
      position: fixed;
      width: 48rpx;
      height: 48rpx;
      z-index: 10;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .details-body{
    background: #f5f5f5;
    padding-bottom: 1rpx;
  }
  .train-info{
    position: relative;
    z-index: 1;
    margin: -40rpx 28rpx 18rpx;
    background-color: #FFFFFF;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    .info-title{
      font-size: 32rpx;
      color: #21252E;
      font-weight: 500;
      margin-bottom: 4rpx;
    }
    .start-time{
      font-size: 28rpx;
      color: #818496;
      padding-bottom: 16rpx;
      margin-top: 10rpx;
    }
    .train-info-bottom{
      border-top: 1rpx solid #EEEEEE;
     padding-top: 16rpx;
      display: flex;
      align-items: center;
      image{
        width: 36rpx;
        height: 36rpx;
      }
      .training-time{
        color: #505363;
        font-size: 26rpx;
      }
    }
  }
  .train-address{
    margin: 16rpx 28rpx 18rpx;
    background-color: #FFFFFF;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    .info-title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      .address-left{
        width: calc(100% - 28rpx);
        display: flex;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .address{
          color: #505363;
          margin-left: 5rpx;
          font-size: 28rpx;
        }
      }
    }
    .map-box{
      width: 100%;
      height: 200rpx;
      background-color: #f5f5f5;
      margin-top: 16rpx;
      border-radius: 16rpx;
      overflow: hidden;
      .map-continer{
        width: 100%;
        height: 100%;
      }
    }
  }
  .introduce{
   padding: 16rpx 28rpx;
    margin-bottom: 20rpx;
    background: #FFFFFF;
    .introduce-header{
      display: flex;
      align-items: center;
      padding-bottom: 8rpx;
      border-bottom: 1rpx solid #F5F5F5;
      .introduce-item{
        margin-right: 38rpx;
        font-size: 30rpx;
        color:#818496;
        &.active{
          color: #425036;
          font-weight: 500;
          position: relative;
          &:before{
            content: '';
            display: block;
            width: 40rpx;
            position: absolute;
            bottom: -8rpx;
            height: 6rpx;
            left: calc(50% - 20rpx);
            background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%), #A6C783;
            border-radius: 2rpx;
          }
        }
      }
    }
    .coach-title{
      font-size: 36rpx;
      color: #21252E;
      font-weight: 500;
      margin-bottom: 20rpx;
      .coach-num{
        display: inline-block;
        color: #818496;
        font-size: 28rpx;
        margin-left: 10rpx;
      }
    }
  }
  .introduce-body{
    padding: 28rpx 0;
    .coach-title{
      font-size: 36rpx;
      color: #21252E;
      margin-bottom: 20rpx;
      .coach-num{
        display: inline-block;
        color: #818496;
        font-size: 28rpx;
        margin-left: 10rpx;
      }
    }
    .coach-item{
      background: #F8F8F8;
      border-radius: 16rpx;
      display: inline-block;
      width: 190rpx;
      padding: 12rpx;
      margin-right: 20rpx;
      image{
        width: 100%;
        height: 180rpx;
        border-radius: 16rpx;
      }
      .coach-name{
        font-size: 28rpx;
        color: #21252E;
        font-weight: 500;
        text-align: center;
        margin-bottom: 10rpx;
      }
      .coach-tag{
        font-size: 24rpx;
        color: #818496;
        text-align: center;
        overflow: hidden;
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .bottom-fixed{
    padding-top: 14px;
    .seizeASeat{
      height: 60rpx;
    }
  }
  .bottom-btn{
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-left: 28rpx;
    padding-right: 28rpx;
    box-sizing: border-box;
    border-top: 1px solid rgb(255,210,0);
    padding-top: 14rpx;
    display: flex;
    justify-content: center;
    // justify-content: space-between;
    align-items: center;
    background-color: rgb(255,210,0);
    .group-registration{
      padding: 16rpx 0;
      width: 180rpx;
      text-align: center;
      border-radius: 16rpx;
      white-space: nowrap;
      box-sizing: border-box;
      border: 1px solid #92C75B;
      font-size: 28rpx;
      margin-right: 20rpx;
      color: #92C75B;
      font-weight: 500;
      letter-spacing: 2rpx;
    }
    .personal-registration{
      color: #FFFFFF;
      border-radius: 16rpx;
      padding: 16rpx 0;
      width: calc(100% - 360rpx);
      font-size: 40rpx;
      text-align: center;
      letter-spacing: 2rpx;
      font-weight: 600;
      &.disabled{
        width: 100%;
        background-color: #B5BCC9;
        color: #FFFFFF;
      }
    }
  }
  .valid-date-code{
    padding: 30rpx;
    .code-header{
      font-size: 32rpx;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color:#333333;
      padding-bottom: 16rpx;
      border-bottom: 1rpx solid #EBEBEB;
    }
    .code-body{
      height: 400rpx;
      text-align: center;
      .code-text{
        margin-top: 48rpx;
        color:#505363;
        font-size: 28rpx;
        margin-bottom: 20rpx;
      }
    }
  }
  .coach-venue-item{
    padding: 16rpx 20px;
    background: #F8F8F8;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
    &:last-child{
      margin-bottom: 0;
    }
    .coach-line{
      height: 1rpx;
      background-color: #EBEBEB;
      width: 100%;
      margin: 16rpx 0;
    }
    .coach-title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 28rpx;
      padding: 10rpx 0;
      margin-bottom: 0;
      .name{
        width: calc(100% - 14rpx);
      }
      .collapse-icon{
        width: 14rpx;
        transition: all .3s;
        &.collapse{
          transform: rotate(-90deg);
        }
      }
    }
  }
  .coach-body{
    &.venue-pople{
      height: 0;
      overflow: hidden;
      transition: all .3s;
    }
    &.collapse{
      height: auto;
    }
    .coach-data-item{
      margin-bottom: 18rpx;
      display: flex;
      align-items: flex-start;
      font-size: 28rpx;
      .coach-label{
        color: #505363;
        white-space: nowrap;
      }
      .coach-value{
        color: #505363;
      }
      &:last-child{
        margin-bottom: 0;
      }
    }
  }
  .tip-box{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    .tip-content{
      position: absolute;
      z-index: 99;
      background-color: #FFFFFF;
      background-size: 100% auto;
      background-position: top;
      background-repeat: no-repeat;
      padding: 48rpx;
      border-radius: 32rpx;
      margin: 64rpx;
      .tip-title{
        display: flex;
        justify-content: center;
        align-items: center;
        color: #21252E;
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
      }
      .tip-label{
        text-align: center;
        color: #818496;
        font-size: 28rpx;
        font-weight: normal;
        margin-bottom: 20rpx;
      }
      .tip-body{
        font-size: 28rpx;
        line-height: 1.5;
        color: #505363;
        margin-bottom: 56rpx;
        .tip-body-item{
          margin-bottom: 20rpx;
        }
      }
      .tip-btn{
        border-radius: 16rpx;
        background: #92C75B;
        padding: 16rpx 32rpx;
        text-align: center;
        color: #FFFFFF;
        font-size: 28rpx;
      }
    }
  }
  ::v-deep .u-code-input{
    justify-content: center;
  }
  .sports-screen{
    padding: 30rpx;
    .sports-btn{
      font-size: 28rpx;
      color: #FFFFFF;
      margin-bottom: 32rpx;
      padding: 16rpx 32rpx;
    }
    .sports-screen-btn{
      position: absolute;
      bottom: 0;
      width: calc(100% - 64rpx);
      left: 0;
      border-radius: 16rpx;
      background: #92C75B;
      padding: 16rpx 0;
      margin: 0 32rpx 32rpx;
      text-align: center;
      color: #FFFFFF;
      font-size: 28rpx;
    }
  }
  .sports-screen-body {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .sports-money{
      margin:  0 32rpx 32rpx;
      font-size: 26rpx;
      .sports-tips{
        color: #9295A4;
      }
      .money{
        margin-top: 5rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: #ED4425;
      }
    }
    .sports-screen-btn{
      width: 50%;
      border-radius: 16rpx;
      background: #92C75B;
      padding: 16rpx 0;
      margin: 0 32rpx 32rpx;
      text-align: center;
      color: #FFFFFF;
      font-size: 28rpx;
    }
  }
  .student{
    position: relative;
    min-height: 500rpx;
    .live-bg{
      position: absolute;
      top: 0;
      left: 0;
      width: 90%;
      height: 500rpx;
      border-radius: 0 0 144rpx 8rpx;
      opacity: 1;
      background: linear-gradient(90deg, #7FAD4F 0%, #A5E067 104%, #92C75B 104%);
      backdrop-filter: blur(10px);
    }
    .image{
      height: 420rpx;
      width: 100%;
      border-radius: 8rpx 24rpx 24rpx 0;
    }
    .swiper-dot{
      margin-top: 30rpx;
      .image-item{
        padding: 10rpx;
        height: 120rpx;
        border-radius: 10rpx;
        background: #FFFFFF;
        image{
          width: 100%;
          height: 100%;
          border-radius: 5rpx;
        }
      }
      ::v-deep .swiper-slide-thumb-active{
        border: 1px solid #9BD16A;
        border-radius: 10rpx;
      }
    }
    .live-title{
      position: relative;
      z-index: 2;
      color: #FFFFFF;
      height: 50rpx;
      line-height: 30rpx;
      font-size: 32rpx;
      padding: 0 20rpx;
      display: flex;
      align-items: center;
      text{
        margin-left: 5rpx;
      }
    }
  }
</style>
